{% load static %}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
    <title>{% block title %}{% endblock title %}</title>
    <link href="{% static 'plugins/bootstrap-3.3.7-dist/css/bootstrap.css' %}" title="" rel="stylesheet"/>
    <link title="" href="{% static 'css/style.css' %}" rel="stylesheet" type="text/css"/>
    <link title="blue" href="{% static 'css/dermadefault.css' %}" rel="stylesheet" type="text/css"/>
    <link title="green" href="{% static 'css/dermagreen.css' %}" rel="stylesheet" type="text/css" disabled="disabled"/>
    <link title="orange" href="{% static 'css/dermaorange.css' %}" rel="stylesheet" type="text/css"
          disabled="disabled"/>
    <link href="{% static 'css/templatecss.css' %}" rel="stylesheet" title="" type="text/css"/>
    <link href="{% static 'css/myStyle.css' %}" rel="stylesheet" type="text/css"/>
    <script src="{% static 'js/moment.js' %}"></script>
    <script src="{% static 'plugins/jquery/jquery.js' %}"></script>
    <script src="{% static 'plugins/jquery/jquery.cookie.js' %}" type="text/javascript"></script>
    <script src="{% static 'plugins/bootstrap-3.3.7-dist/js/bootstrap.js' %}" type="text/javascript"></script>
</head>
<body>
<nav class="nav navbar-default navbar-mystyle navbar-fixed-top">
    <div class="navbar-header">
        <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand mystyle-brand"><span class="glyphicon glyphicon-home"></span></a></div>
    <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
            <li class="li-border"><a class="mystyle-color" href="#">主机管理系统</a></li>
        </ul>
        <ul class="nav navbar-nav pull-right">
            <li class="li-border">
                <a href="#" class="mystyle-color">
                    <span class="glyphicon glyphicon-bell"></span>
                    <span class="topbar-num">0</span>
                </a>
            </li>
            <li class="li-border dropdown"><a href="#" class="mystyle-color" data-toggle="dropdown">
                <span class="glyphicon glyphicon-search"></span> 搜索</a>
                <div class="dropdown-menu search-dropdown">
                    <div class="input-group">
                        <input type="text" class="form-control">
                        <span class="input-group-btn">
                            <button type="button" class="btn btn-default">搜索</button>
                        </span>
                    </div>
                </div>
            </li>
            <li class="dropdown li-border">
                <a href="#" class="dropdown-toggle mystyle-color" data-toggle="dropdown">
                    {% block user %}{% endblock %}
                    <span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="{% url 'app01:logout' %}">退出</a></li>
                </ul>
            </li>
            <li class="dropdown"><a href="#" class="dropdown-toggle mystyle-color" data-toggle="dropdown">换肤<span
                    class="caret"></span></a>
                <ul class="dropdown-menu changecolor">
                    <li id="blue"><a href="#">蓝色</a></li>
                    <li class="divider"></li>
                    <li id="green"><a href="#">绿色</a></li>
                    <li class="divider"></li>
                    <li id="orange"><a href="#">橙色</a></li>
                </ul>
            </li>
        </ul>
    </div>
</nav>
<div class="down-main">
    <div class="left-main left-full">
        <div class="sidebar-fold"><span class="glyphicon glyphicon-menu-hamburger"></span></div>
        <div class="subNavBox">
            <div class="sBox">
                <div class="subNav sublist-down"><span class="title-icon glyphicon glyphicon-chevron-down"></span><span
                        class="sublist-title">用户管理</span>
                </div>
                <ul class="navContent" style="display:block">
                    <li>
                        <div class="showtitle" style="width:100px;">用户列表</div>
                        <a href="{% url 'app01:user' %}" style="padding-left: 20px;">
                            <span class="sublist-icon glyphicon glyphicon-user"></span>
                            <span class="sub-title">用户列表</span>
                        </a>
                    </li>
                    <li>
                        <div class="showtitle" style="width:100px;">添加用户</div>
                        <a href="{% url 'app01:add_user' %}" style="padding-left: 20px;">
                            <span class="sublist-icon glyphicon glyphicon-plus"></span>
                            <span class="sub-title">添加用户</span>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="sBox">
                <div class="subNav sublist-up"><span class="title-icon glyphicon glyphicon-chevron-down"></span><span
                        class="sublist-title">主机管理</span>
                </div>
                <ul class="navContent">
                    <li>
                        <div class="showtitle" style="width:100px;">主机列表</div>
                        <a href="{% url 'app01:host' %}" style="padding-left: 20px;">
                            <span class="sublist-icon glyphicon glyphicon-blackboard"></span>
                            <span class="sub-title">主机列表</span>
                        </a>
                    </li>
                    <li>
                        <div class="showtitle" style="width:100px;">添加主机</div>
                        <a href="{% url 'app01:add_host' %}" style="padding-left: 20px;">
                            <span class="sublist-icon glyphicon glyphicon-plus"></span>
                            <span class="sub-title">添加主机</span>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="sBox">
                <div class="subNav sublist-up"><span class="title-icon glyphicon glyphicon-chevron-down"></span><span
                        class="sublist-title">业务线管理</span>
                </div>
                <ul class="navContent">
                    <li>
                        <div class="showtitle" style="width:100px;">业务线列表</div>
                        <a href="{% url 'app01:serviceLine' %}" style="padding-left: 20px;">
                            <span class="sublist-icon glyphicon  glyphicon-signal"></span>
                            <span class="sub-title">业务线列表</span>
                        </a>
                    </li>
                    <li>
                        <div class="showtitle" style="width:100px;">添加业务线</div>
                        <a href="{% url 'app01:add_serviceLine' %}" style="padding-left: 20px;">
                            <span class="sublist-icon glyphicon glyphicon-plus"></span>
                            <span class="sub-title">添加业务线</span>
                        </a>
                    </li>
                    <li>
                        <div class="showtitle" style="width:100px;">用户和业务线关系列表</div>
                        <a href="{% url 'app01:serviceLine_user' %}" style="padding-left: 20px;">
                            <span class="sublist-icon glyphicon glyphicon-list"></span>
                            <span class="sub-title">用户和业务线关系列表</span>
                        </a>
                    </li>
                    <li>
                        <div class="showtitle" style="width:100px;">用户和业务线关系</div>
                        <a href="{% url 'app01:add_serviceLine_user' %}" style="padding-left: 20px;">
                            <span class="sublist-icon glyphicon glyphicon-plus"></span>
                            <span class="sub-title">用户和业务线关系</span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    {% block content %}
    {% endblock content %}
</div>
<script data-cfasync="false" src="{% static 'js/email-decode.min.js' %}"></script>
<script type="text/javascript">
    /*日期时间*/
    //设定moment区域为中国
    setInterval(function(){
        moment.locale('zh-cn');
        $("#myYear").html(moment().format("YYYY"));
        $("#myMonth").html(moment().format("MM"));
        $("#myDay").html(moment().format("DD"));
        $("#myHour").html(moment().format("HH:mm:ss"));
        $("#myweek").html(moment().format("E"));
    }, 1000);

    $(function () {
        /*换肤*/
        $(".dropdown .changecolor li").click(function () {
            var style = $(this).attr("id");
            if(style == 'blue'){
                $(".mystyle").removeClass('warning success').addClass('info')
                $(".mystyle-panel").removeClass('panel-warning panel-success').addClass('panel-info')
            }else if(style == 'green'){
                $(".mystyle").removeClass('warning info').addClass('success')
                $(".mystyle-panel").removeClass('panel-warning panel-info').addClass('panel-success')
            }else if(style == 'orange'){
                $(".mystyle").removeClass('success info').addClass('warning')
                $(".mystyle-panel").removeClass('panel-info panel-success').addClass('panel-warning')
            }
            $("link[title!='']").attr("disabled", "disabled");
            $("link[title='" + style + "']").removeAttr("disabled");
            $("form div[class=form-group]").css('margin-top','10');

            $.cookie('mystyle', style, {expires: 7}); // 存储一个带7天期限的 cookie
        });
        var cookie_style = $.cookie("mystyle");
        if (cookie_style != null) {
            $("link[title!='']").attr("disabled", "disabled");
            $("link[title='" + cookie_style + "']").removeAttr("disabled");
        }
        /*左侧导航栏显示隐藏功能*/
        $(".subNav").click(function () {
            /*显示*/
            if ($(this).find("span:first-child").attr('class') == "title-icon glyphicon glyphicon-chevron-down") {
                $(this).find("span:first-child").removeClass("glyphicon-chevron-down");
                $(this).find("span:first-child").addClass("glyphicon-chevron-up");
                $(this).removeClass("sublist-down");
                $(this).addClass("sublist-up");
            }
            /*隐藏*/
            else {
                $(this).find("span:first-child").removeClass("glyphicon-chevron-up");
                $(this).find("span:first-child").addClass("glyphicon-chevron-down");
                $(this).removeClass("sublist-up");
                $(this).addClass("sublist-down");
            }
            // 修改数字控制速度， slideUp(500)控制卷起速度
            $(this).next(".navContent").slideToggle(300).siblings(".navContent").slideUp(300);
        });
        /*左侧导航栏缩进功能*/
        $(".left-main .sidebar-fold").click(function () {
            if ($(this).parent().attr('class') == "left-main left-full") {
                $(this).parent().removeClass("left-full");
                $(this).parent().addClass("left-off");

                $(this).parent().parent().find(".right-product").removeClass("right-full");
                $(this).parent().parent().find(".right-product").addClass("right-off");
            } else {
                $(this).parent().removeClass("left-off");
                $(this).parent().addClass("left-full");

                $(this).parent().parent().find(".right-product").removeClass("right-off");
                $(this).parent().parent().find(".right-product").addClass("right-full");
            }
        });
    })
</script>
<script src="{% static 'js/myjs.js' %}"></script>
{% block jsFiles %} {% endblock jsFiles %}
</body>
</html>
